<template>
  <div class="demo">
    <div class="demo-title">切换不同的选择器</div>
    <div class="demo-content">
      <Space direction="vertical" :size="12">
        <Select v-model:value="type">
          <Select.Option value="time">Time</Select.Option>
          <Select.Option value="date">Date</Select.Option>
          <Select.Option value="week">Week</Select.Option>
          <Select.Option value="month">Month</Select.Option>
          <Select.Option value="quarter">Quarter</Select.Option>
          <Select.Option value="year">Year</Select.Option>
        </Select>
        <template v-if="type === 'time'">
          <TimePicker />
        </template>
        <template v-else>
          <DatePicker :picker="type" />
        </template>
      </Space>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Space from '@sscd/space';
  import Select from '@sscd/select';
  import TimePicker from '@sscd/time-picker';
  import DatePicker from '@sscd/date-picker';
  const type = ref<any>('time');
</script>
